<template>

  <splitpanes @resize="paneSize = $event[0].size"  class="default-theme">
    <pane  size="20" :style="{'height': h}">
      <a-layout has-sider>
        <menu-side :pane-size="paneSize" />
      </a-layout>
    </pane>
    <pane :style="{'height': h}">
      <update-name v-if="model === 'updateName'"></update-name>
      <sum-one v-else-if="model === 'sumOne'"></sum-one>
      <chat-sum v-else-if="model === 'chatSum'"></chat-sum>
      <setting v-else-if="model === 'setting'"></setting>
      <setting v-else-if="model === 'setting'"></setting>
      <api v-else-if="model === 'api'"></api>
      <upgrade-box v-else-if="model === 'UpgradeBox'"></upgrade-box>
    </pane>
  </splitpanes>
</template>

<script setup lang="ts">
import MenuSide from "./MenuSide.vue"
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css';
import UpdateName from "./main/UpdateName.vue";
import SumOne from "./main/SumOne.vue";
import Api from "./main/Api.vue";
import Setting from "./main/Setting.vue";
import {ref, provide} from "vue";
import ChatSum from "./main/ChatSum.vue";
import UpgradeBox from "./main/UpgradeBox.vue";

const model = ref("UpgradeBox")

provide('mainModel', model)

const h = ref('100%')
window.addEventListener('resize', () => {
  h.value = '100%';
});

defineProps({
  // 当前的值
  paneSize: [Number],
})

</script>

<style scoped>

</style>